import _ from "lodash";
import React from "react";
import FormField from "./field";
import Toggle from "../toggle";
import { inject, observer } from "mobx-react";

@inject('edcFormDesignerStore')
@observer
export default class LeftMenu extends React.Component {
  constructor(props) {
    super();

    const { componentStore, leftMenuStore } = props.edcFormDesignerStore;

    this.store = leftMenuStore;
    this.comStore = componentStore;
    this.onFormFieldClick = _.memoize(this.onClick.bind(this));
  }

  // type 作为memoize的resolver
  onClick(type, com) {
    const { addComponentToBottom } = this.comStore;

    return () => addComponentToBottom(com);
  }

  render() {
    const { formComs } = this.store;
    const { onDragEnd } = this.comStore;

    return (
      <div className='ef-left'>
        {formComs.map(({ category, coms }) => (
          <Toggle title={category}>
            <div>
              {coms.map(com => (
                <FormField {...com}
                  onDragEnd={onDragEnd}
                  onClick={this.onClick(com.type, com)}
                />
              ))}
            </div>
          </Toggle>
        ))}
      </div>
    );
  }
}